<template>
    <div>
        <el-button type="primary" style="float:right" @click="$router.push('/addproduct')">添加品类</el-button>
        <h1>品类管理</h1>
        <p>当前品类:{{id}}</p>
        <Tables 
            :cols="cols" 
            :data="list">
             <template v-slot:action="{row}">
                <el-button type="primary" size="mini" @click="look(row.id)" v-show="id==0">查看子品类</el-button>
                <el-button type="primary" size="mini" @click="edit(row.id,row.name)">修改名称</el-button>
            </template>
        </Tables>
        <el-dialog title="修改名称" :visible.sync="dialogVisible">
            名称：<el-input v-model="name"></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="Yes">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { getcategory,Editcategory } from "../../../http/index.js";
import Tables from "../../common/table.vue";
export default {
    components:{Tables},
  data() {
    return {
        id:0,
        list:[],
        name:'',
        ids:0,
        dialogVisible:false,
      cols: [
        {
          label: "id",
          name: "id"
        },
        {
          label: "信息",
          name: "name"
        },
        {
          label: "操作",
          name: "attress",
          slot: "action"
        }
      ]
    };
  },
  mounted(){
      this.getcate()
  },
  methods:{
    async  getcate(){
        let res =await getcategory();
        console.log(res);
        this.list=res.data.data
        this.id=0
    },
    async look(id){
        let res=await getcategory({categoryId:id})
        this.id=id;
        console.log(id);
        this.list=res.data.data
    },
    edit(id,name){
        this.name=name;
        this.ids=id
        this.dialogVisible=true
    },
    async Yes(){
      let res = await Editcategory({categoryId:this.ids,categoryName:this.name});
      this.$message.success(res.data.data)
      this.look(this.id)
      console.log(res);
      this.dialogVisible=false
    }
  }
};
</script>

<style lang="sass" scoped>

</style>